<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { storeToRefs } from 'pinia';
import useSongURLStore from '../../store/songURL'
import lyricTime from "../../store/lyricTime";
import SongTime from '../../components/common/songTime/index.vue'
import { requestGetSoundSource, requestLyric, requestSongAllCom, requestSongListHotCom } from '../../utils/axiosURL'
import { io } from "socket.io-client"

const songURLStore = useSongURLStore()
const lyrictime = lyricTime()
// pinia数据
let { songID, songURL, songName, singer, picture, durations, playIndex, playList, playStates } = storeToRefs(useSongURLStore())
// 播放暂停显示状态
let playState = ref<boolean>(true)
// 获取进度条的实例
const progressBarRef = ref<any>(null)
// 获取已播放的进度条实例
const progressBarRedRef = ref<any>(null)
// 记录鼠标移入进度条距离左边的距离
let saveLeftdistance = ref<any>(0)
// 获取音频实例
const getAudioTag = ref<any>(null)
// 存储音频当前播放时长
let saveCurrentTime = ref<any>(null)
// 获取当前时长的定时器
let currentTimeInterval = ref<any>(null)
// 随机/列表/单曲/顺序播放状态
let playStateRLSS = ref<number>(0)
// drawer 的显示状态
let drawer = ref<any>(false)
// 抽屉展示的方向
let direction = ref<any>('btt')
// 窗口最大化与最小化的切换值
const SwitchingMiniMax = ref(true)
// 存储歌词
let transArr = ref<any>([])
let resultLyrics = ref<any>([])
let itemArr = ref<any>([])
let mm = ref<number>(0)
let ss = ref<number>(0)
let time = ref<number>(0)
let LyricsWrapExample = ref<any>(null)
// 获取歌词ul容器的dom实例
let lyricUlExample = ref<any>(null)
// 播放到那一句歌词
let playLyricIndex = ref<number>(0)
// 存储当前播放时长
let CurrentPlaybackDuration = ref<number>(0)
// 存储热门评论
const saveHotCommentData = reactive<any>([])
// 热门评论总数
const hotCommentTotal = ref<any>(null)
// 请求歌单所有评论的页码
let allCommentPage = ref<any>(1)
// 存储所有歌单评论
let saveAllCommentData = reactive<any>([])
// 所有评论的长度
const allCommentLength = ref<any>(0)
// 获取drawer歌词以及评论总容器dom节点
const pageTotalWrap = ref<any>(null)
// 控制顶部歌名与作者是否显示的布尔值
let smallNameBool = ref<boolean>(false)
// 禁止重复创建桌面歌词渲染进程
let forbidDesktopLyricState = ref<boolean>(false)
// socket 对象
let sockets = ref<any>()


onMounted(() => {
  requestLyricFn()
  requestSongListHotComFn(songID.value)
  requestSongAllComFn(songID.value)
  const socket = io('ws://localhost:3000')
  sockets.value = socket
})

// 控制顶部歌名与作者是否显示的事件处理函数
const scrollLyricsAndImgWrapAndCommentFn = () => {
  if (pageTotalWrap.value.scrollTop >= 300) return smallNameBool.value = true
  smallNameBool.value = false
}

// 播放暂停的显示状态
const clickPlayBegin = () => {
  playState.value = false
  getAudioTag.value.play()
  localStorage.setItem("playState", `${playState.value}`)
  songURLStore.playStateChange(playState.value)
  clearInterval(currentTimeInterval)
  currentTimeInterval = setInterval(() => {
    updateCurrentTime()
  }, 1000)
}
const clickPlayParse = () => {
  playState.value = true
  getAudioTag.value.pause()
  localStorage.setItem("playState", `${playState.value}`)
  songURLStore.playStateChange(playState.value)
  clearInterval(currentTimeInterval)
  currentTimeInterval = setInterval(() => {
    updateCurrentTime()
  }, 1000)
}
const moveProgressBar = (event: any) => saveLeftdistance = event.offsetX
// 鼠标点击灰色进度条给红色进度条赋值长度
const clickProgressBar = (event: any) => {
  progressBarRedRef.value.style.width = `${Math.ceil((event.offsetX / 345) * 100)}%`
  getAudioTag.value.currentTime = getAudioTag.value.duration * parseInt(progressBarRedRef.value.style.width) / 100
  getAudioTag.value.play()
  playState.value = false
}
// 鼠标按下红色进度条事件
const keyPressProgressBar = (event: any) => progressBarRedRef.value.style.width = `${Math.ceil((saveLeftdistance / 345) * 100)}%`
// 监听歌曲url变化后更新播放元素
watch(songURL, () => {
  getAudioTag.value.load()
  getAudioTag.value.play()
  playState.value = false
  progressBarRedRef.value.style.width = 0 + 'px'
  clearInterval(currentTimeInterval)
  currentTimeInterval = setInterval(() => {
    updateCurrentTime()
  }, 1000)
})
watch(songID, () => {
  requestLyricFn()
  transArr.value = []
  resultLyrics.value = []
  itemArr.value = []
  mm.value = 0
  ss.value = 0
  time.value = 0
  requestSongListHotComFn(songID.value)
  requestSongAllComFn(songID.value)
})
watch(CurrentPlaybackDuration, () => {
  LyricsWrapExample.value?.forEach((item: any, index: number) => {
    if (item.className === 'lyricActive') {
      playLyricIndex.value = index
      // console.log(item.innerHTML, '打印的歌词')
    }
  })
})
watch(playLyricIndex, () => {
  // console.log(playLyricIndex.value, '/////')
  if (playLyricIndex.value === 0) return lyricUlExample.value.srollTop = 0
  lyricUlExample.value.scrollTop = (lyricUlExample.value.scrollHeight / resultLyrics.value.length) * playLyricIndex.value
  // console.log(resultLyrics.value[playLyricIndex.value].ly, '正在播放的歌词')
  // myApi.transferLyric(resultLyrics.value[playLyricIndex.value].ly)
  sockets.value.emit('current-lyric', { lyric: resultLyrics.value[playLyricIndex.value].ly })
})
// 请求歌词
const requestLyricFn = () => {
  requestLyric(songID.value).then((data: any) => {
    transArr.value = data.lrc.lyric.split('\n')
    transArr.value.forEach((item: string) => {
      itemArr.value = item.split('[')[1].split(']')
      mm.value = parseInt(itemArr.value[0].split(":")[0])
      ss.value = parseInt(itemArr.value[0].split(":")[1])
      time.value = mm.value * 60 + ss.value
      resultLyrics.value.push({ time: time.value, ly: itemArr.value[1] })
    })
  }).catch(_ => { })
}
// 请求歌曲的热门评论
const requestSongListHotComFn = (id: any) => {
  requestSongListHotCom(id, 0, 0).then((data: any) => {
    saveHotCommentData.values = data.hotComments
    hotCommentTotal.value = data.total
  }).catch(_ => { })
}
// 请求歌曲的所有评论
const requestSongAllComFn = (id: number) => {
  requestSongAllCom(id, allCommentPage.value).then((data: any) => {
    saveAllCommentData.values = data.comments
    allCommentLength.value = data.total
  }).catch(_ => { })
}
const changePages = () => requestSongAllComFn(songID.value)
// 更新当前播放时长
const updateCurrentTime = () => {
  if (getAudioTag.value.ended) nextSong()
  saveCurrentTime.value = getAudioTag.value.currentTime * 1000
  progressBarRedRef.value.style.width = `${(getAudioTag.value.currentTime / getAudioTag.value.duration) * 100}%`
  lyrictime.changeLyrics(parseInt(getAudioTag.value.currentTime), (getAudioTag.value.currentTime / getAudioTag.value.duration) * 100)
  CurrentPlaybackDuration.value = parseInt(getAudioTag.value.currentTime)
}
// 上一曲事件处理函数
const previousSong = () => {
  if (JSON.stringify(playList.value) === '[]') return
  playIndex.value--
  if (playIndex.value < 0) playIndex.value = playList.value.length - 1
  localStorage.setItem("playState", "false")
  songURLStore.playStateChange(false)
  requestGetSoundSource(playList.value[playIndex.value].id).then(({ data }: any) => {
    localStorage.setItem('songInfomation', JSON.stringify(
      {
        songName: playList.value[playIndex.value].name,
        songUrl: data[0].url,
        singer: playList.value[playIndex.value].ar[0].name,
        picUrl: playList.value[playIndex.value].al.picUrl,
        duration: playList.value[playIndex.value].dt,
        index: playIndex.value,
        id: playList.value[playIndex.value].id
      }
    ))
    songURLStore.init(
      data[0].url,
      playList.value[playIndex.value].name,
      playList.value[playIndex.value].ar[0].name,
      playList.value[playIndex.value].al.picUrl,
      playList.value[playIndex.value].dt,
      playIndex.value,
      playList.value[playIndex.value].id
    )
  }).catch((err: any) => {
    console.log(err);
  })
}
// 下一曲事件处理函数
const nextSong = () => {
  if (JSON.stringify(playList.value) === '[]') return
  if (playStateRLSS.value === 3) {
    songURLStore.randomPlayNum(parseInt(`${(Math.random() * (playList.value.length + 1))}`))
    localStorage.setItem("songInfomation", JSON.stringify(
      {
        duration: JSON.parse(localStorage.getItem("songInfomation") as string)?.duration,
        index: Math.random() * (playList.value.length + 1),
        picUrl: JSON.parse(localStorage.getItem("songInfomation") as string)?.picUrl,
        singer: JSON.parse(localStorage.getItem("songInfomation") as string)?.singer,
        songName: JSON.parse(localStorage.getItem("songInfomation") as string)?.songName,
        songUrl: JSON.parse(localStorage.getItem("songInfomation") as string)?.songUrl,
        id: JSON.parse(localStorage.getItem("songInfomation") as string)?.id,
      }
    ))
  } else playIndex.value++
  if (playIndex.value > playList.value.length - 1) playIndex.value = 0
  localStorage.setItem("playState", "false")
  songURLStore.playStateChange(false)
  requestGetSoundSource(playList.value[playIndex.value].id).then(({ data }: any) => {
    localStorage.setItem('songInfomation', JSON.stringify(
      {
        songName: playList.value[playIndex.value].name,
        songUrl: data[0].url,
        singer: playList.value[playIndex.value].ar[0].name,
        picUrl: playList.value[playIndex.value].al.picUrl,
        duration: playList.value[playIndex.value].dt,
        index: playIndex.value,
        id: playList.value[playIndex.value].id
      }
    ))
    songURLStore.init(
      data[0].url,
      playList.value[playIndex.value].name,
      playList.value[playIndex.value].ar[0].name,
      playList.value[playIndex.value].al.picUrl,
      playList.value[playIndex.value].dt,
      playIndex.value,
      playList.value[playIndex.value].id
    )
  }).catch((err: any) => {
    console.log(err);
  })
}
// 随机/列表/单曲/顺序播放状态事件处理函数
const playStateRLSSFN = () => {
  if (playStateRLSS.value >= 3) return playStateRLSS.value = 0
  playStateRLSS.value++
  switch (playStateRLSS.value) {
    case 0: getAudioTag.value.loop = false
      break;
    case 1: getAudioTag.value.loop = true
      break;
    case 2: getAudioTag.value.loop = false
      break;
    case 3: nextSong()
      break;
    default:
      break
  }
}
// 窗口最小化
const winMini = () => myApi.winMini()
// 窗口最大化
const winMax = () => {
  myApi.winMax()
  SwitchingMiniMax.value = !SwitchingMiniMax.value
}
// 取消窗口最大化
const cancelMax = () => {
  myApi.cancelMaxWin()
  SwitchingMiniMax.value = !SwitchingMiniMax.value
}
// 关闭窗口
const closeWin = () => myApi.closedWin()
// 打开登录的渲染进程子窗口
const showLoginWin = () => {
  myApi.showLoginWins(true)
}
// 打开歌词组件
const openDesktopLyric = (e: any) => {
  // myApi.openDeskLyricWin({ x: parseInt((e.screenX / 2).toFixed(1)), y: e.screenY });
  // 防止重复创建桌面歌词渲染进程
  if (!forbidDesktopLyricState.value) {
    // 传递当前用户屏幕尺度给渲染进程, 作为桌面歌词组件默认展示的坐标
    myApi.openDeskLyricWin({ x: parseInt((e.screenX / 2).toFixed(1)), y: e.screenY });
    sockets.value.emit('closeDesktopLyrics', forbidDesktopLyricState.value)
    forbidDesktopLyricState.value = true;
  } else {
    myApi.closeDeskLyricWin();
    sockets.value.emit('closeDesktopLyrics', forbidDesktopLyricState.value)
    forbidDesktopLyricState.value = false;
  }
}
</script>


<template>
  <div class="playFooterWrap">
    <div class="playLeft">
      <img class="songImg" :src="`${picture}`" @click="drawer = true" />
      <div class="songDesc">
        <p class="songName">
          <span>{{ songName }}</span>
          <span class="iconfont icon-xihuan"></span>
        </p>
        <p>{{ singer }}</p>
      </div>
    </div>
    <div class="playcenter">
      <div class="controls_top">
        <div class="topWrap">
          <span @click="playStateRLSSFN">
            <span v-if="playStateRLSS === 0" class="iconfont icon-liebiaoxunhuan" title="列表播放"></span>
            <span v-if="playStateRLSS === 1" class="iconfont icon-danquxunhuan" title="单曲播放"></span>
            <span v-if="playStateRLSS === 2" class="iconfont icon-23_shunxubofang" title="顺序播放"></span>
            <span v-if="playStateRLSS === 3" class="iconfont icon-suijibofang" title="随机播放"></span>
          </span>
          <span class="iconfont icon-shangyiqu" @click="previousSong"></span>
          <div class="playBox">
            <span v-if="playState" class="iconfont icon-24gf-play" @click="clickPlayBegin"></span>
            <span v-else class="iconfont icon-zanting" @click="clickPlayParse"></span>
          </div>
          <span class="iconfont icon-xiayiqu" @click="nextSong"></span>
          <span class="iconfont icon-geciweidianji" @click="openDesktopLyric"></span>
        </div>
      </div>
      <div class="controls_btm">
        <div class="btmWrap">
          <audio ref="getAudioTag">
            <source :src="`${songURL}`" />
          </audio>
          <SongTime :songDuration=saveCurrentTime />
          <div class="progressBar" ref="progressBarRef" @click="clickProgressBar" @mousemove="moveProgressBar">
            <div ref="progressBarRedRef" class="progressState" @mousedown="keyPressProgressBar">
            </div>
          </div>
          <SongTime :songDuration=durations />
        </div>
      </div>
    </div>
    <div class="playright">
      <button class="tone_quality">{{ playStateRLSS }}</button>
      <span class="iconfont icon-icon_yinxiao"></span>
      <span class="iconfont icon-shengyinyinliang"></span>
      <span class="iconfont icon-duoren"></span>
      <span class="iconfont icon-24gf-playlist2"></span>
    </div>
    <el-drawer v-model="drawer" :direction="direction" size="93%">
      <div class="drawers">
        <img class="songBKImg" :src="picture" alt="">
        <div class="topMores">
          <div class="close">
            <span class="iconfont icon-xiangzuojiantou" @click="drawer = false"></span>
          </div>
          <div class="centerSongName">
            <p v-if="smallNameBool" class="songName">{{ songName }}</p>
            <span v-if="smallNameBool" class="author">{{ singer }}</span>
          </div>
          <div class="rightBox">
            <div class="window_control">
              <span class="iconfont icon-zuixiaohua1"></span>
              <span class="iconfont icon-zuixiaohua" @click="winMini"></span>
              <span v-if="SwitchingMiniMax" class="iconfont icon-zuidahua" @click="winMax"></span>
              <span v-else class="iconfont icon-chuangkouhuanyuan" @click="cancelMax"></span>
              <span class="iconfont icon-guanbi" @click="closeWin"></span>
            </div>
          </div>
        </div>
        <div class="LyricsAndImgWrapAndComment" ref="pageTotalWrap" @scroll="scrollLyricsAndImgWrapAndCommentFn">
          <div class="songNameAndLyrics">
            <div class="songNameWrap">
              <p class="songNameBig">{{ songName }}</p>
              <p class="authorAlbumBig">{{ singer }}</p>
            </div>
            <div class="ImgAndLyrics">
              <div class="imgWrap">
                <div class="grayCircle" :class="!playStates ? 'spinCircle' : 'pausedCircle'">
                  <div class="imgCircle">
                    <img :src="picture" alt="">
                  </div>
                </div>
              </div>
              <div class="LyricWrap">
                <ul ref="lyricUlExample">
                  <li ref="LyricsWrapExample"
                    v-for="item in resultLyrics.map((item2: any, index2: number) => item2 = { ...item2, end: resultLyrics[index2 + 1]?.time - 1 })"
                    :class="CurrentPlaybackDuration >= item.time && CurrentPlaybackDuration <= item.end ? 'lyricActive' : ''">
                    {{ item.ly }}</li>
                </ul>
              </div>
            </div>
            <div class="commentWrap">
              <div class="hotCommentList">
                <p class="excellentComment">精彩评论</p>
                <commentItem v-if="saveHotCommentData.values.length" :commentData=saveHotCommentData.values
                  textColor="white" />
                <commentItemSkeleton v-else v-for="item in 10" />
              </div>
              <div class="allCommentList">
                <p class="allComTitle">全部评论</p>
                <commentItem v-if="saveAllCommentData.values.length" :commentData=saveAllCommentData.values
                  textColor="white" />
                <commentItemSkeleton v-else v-for="item in 10" />
                <div class="paging">
                  <el-pagination small background layout="prev, pager, next" :total="allCommentLength"
                    v-model:current-page="allCommentPage" @current-change="changePages" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>


<style lang="scss" scoped>
.playFooterWrap {
  z-index: 999;
  display: flex;
  position: absolute;
  width: 100vw;
  height: 70px;
  border-top: 1px solid $lineColor;
  background-color: $theme-white;

  .playLeft {
    display: flex;
    align-items: center;
    flex-basis: 240px;
    padding: 10px;
    box-sizing: border-box;

    .songImg {
      flex-basis: 50px;
      width: 50px;
      height: 50px;
      border-radius: 6px;
      cursor: pointer;
    }

    .songDesc {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      padding-left: 6px;
      box-sizing: border-box;
      height: 40px;
      color: $font_main_color;
      cursor: pointer;

      font: {
        size: $font-size-sm;
        family: $textFont;
      }

      .songName {
        display: flex;

        span:nth-child(1) {
          display: block;
          max-width: 140px;
          margin-right: 5px;
          white-space: nowrap;
          overflow: hidden;
          // text-overflow: ellipsis;
        }
      }
    }
  }

  .playcenter {
    display: flex;
    flex-direction: column;
    flex: 1;

    .controls_top {
      display: flex;
      justify-content: center;
      width: 100%;
      flex-basis: 45px;

      .topWrap {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 250px;
        height: 100%;

        .playBox {
          width: 35px;
          line-height: 35px;
          text-align: center;
          background-color: $BK_GRAY;
          border-radius: 50%;

          .icon-24gf-play {
            margin-left: 3px;
          }

          .icon-zanting {
            display: block;
            font-size: $font-size-md;
            transform: scale(1.5);
          }

          &:hover {
            background-color: rgb(229, 229, 229);
          }
        }

        >span {
          font-size: $font-size-md;
          cursor: pointer;

          &:hover {
            @include author_color('author_color');
          }
        }
      }
    }

    .controls_btm {
      display: flex;
      justify-content: center;
      flex: 1;

      .btmWrap {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 460px;
        height: 100%;

        span {
          color: $font_second_color;
          font-size: $font-size-xs;
          font-family: $textFont;
        }

        .progressBar {
          width: 75%;
          height: 3.5px;
          background-color: $lineColor;

          .progressState {
            position: relative;
            width: 0%;
            height: 100%;
            @include background_color('bk_color');

            &::after {
              display: none;
              content: "";
              position: absolute;
              top: calc(50% - 4px);
              right: calc(0% - 4px);
              width: 8px;
              height: 8px;
              border-radius: 50%;
              @include background_color('bk_color');
            }
          }

          &:hover {
            height: 4.5px;
          }

          &:hover .progressState::after {
            display: block;
          }
        }
      }
    }
  }

  .playright {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-basis: 240px;
    padding: 0 13px;
    box-sizing: border-box;
    cursor: pointer;

    .tone_quality {
      @extend .clearButton;
      padding: 1px 2px;
      border: 1px solid $theme-white;
      cursor: pointer;
    }

    span {
      color: $font_main_color;
      font-size: $font-size-md;
    }
  }

  .drawers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px 10px 10px 10px;

    .songBKImg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      filter: blur(80px);
    }

    .topMores {
      display: flex;
      align-items: center;
      position: absolute;
      top: 23px;
      left: 0;
      width: 100%;
      height: 50px;
      -webkit-app-region: drag !important;

      .close {
        flex-basis: 220px;
        display: flex;
        padding-left: 40px;
        box-sizing: border-box;

        .icon-xiangzuojiantou {
          transform: rotate(-90deg);
          font-size: 20px;
          cursor: pointer;
          color: #fff;
          line-height: 50px;
          -webkit-app-region: no-drag !important;
        }
      }

      .centerSongName {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;

        .songName {
          color: #fff;
          font-family: $activeTextFont;
        }

        .author {
          color: #dcdbdb;
          font-family: $activeTextFont;
          font-size: $font-size-sm;
        }
      }

      .rightBox {
        flex-basis: 200px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 20px;

        .window_control {
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-basis: 150px;
          padding-left: 6px;
          width: 100%;
          -webkit-app-region: no-drag;

          span {
            color: $font_default-color;
            transition: .2s;

            &:hover {
              color: $font_hover_color;
            }
          }
        }
      }
    }

    .LyricsAndImgWrapAndComment {
      position: absolute;
      top: 73px;
      left: 0;
      width: 100%;
      height: calc(100% - 50px);
      padding-bottom: 50px;
      box-sizing: border-box;
      overflow: auto;

      .songNameAndLyrics {
        width: 100%;
        height: 600px;

        .songNameWrap {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: center;
          width: 100%;
          height: 80px;

          .songNameBig {
            font-size: $font-size-lg2;
            font-family: $activeTextFont;
            color: $font_default_color;
          }

          .authorAlbumBig {
            font-size: $font-size-sm;
            font-family: $activeTextFont;
            color: $font_default_color
          }
        }

        .ImgAndLyrics {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: calc(100% - 80px);

          .imgWrap {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            height: 100%;

            .grayCircle {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 325px;
              height: 325px;
              border-radius: 50%;
              background-color: rgba(255, 255, 255, 0.5);
              animation: spin 14s infinite linear forwards;

              .imgCircle {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 300px;
                height: 300px;
                border-radius: 50%;
                background: repeating-radial-gradient(#252525 6px,
                    #000 10px);

                img {
                  width: 220px;
                  height: 220px;
                  border-radius: 50%;
                }
              }
            }
          }

          .LyricWrap {
            width: 50%;
            height: 400px;
            padding-right: 120px;
            box-sizing: border-box;

            ul {
              scroll-behavior: smooth;
              width: 100%;
              height: 390px;
              padding-bottom: 180px;
              padding-top: 180px;
              box-sizing: border-box;
              overflow: auto;
              border-right: 1px solid $lineColor;

              li {
                color: $font_default_color;
                font-family: $activeTextFont;
                margin-bottom: 20px;
              }

              .lyricActive {
                font-size: 24px;
                // color: #fff;
                @include author_color('author_color');
              }
            }
          }
        }

        .commentWrap {
          width: 800px;
          margin: 0 auto;
          padding-bottom: 100px;
          box-sizing: border-box;

          .hotCommentList {
            width: 100%;
            margin-top: 10px;

            .excellentComment {
              font-family: $activeTextFont;
              color: #fff;
            }

            .viewMore {
              display: flex;
              justify-content: center;
              margin-top: 40px;

              button {
                @extend .clearButton;
                border: 1px solid $lineColor;
                padding: 6px 20px;
                border-radius: 25px;
                cursor: pointer;
                font-size: $font-size-sm;

                span {
                  vertical-align: -1px;
                  font-size: $font-size-sm;
                }
              }
            }
          }

          .allCommentList {
            width: 100%;
            margin-top: 50px;

            .allComTitle {
              font-family: $activeTextFont;
              color: #fff;
            }

            .paging {
              display: flex;
              justify-content: center;
              width: 100%;
              margin-top: 50px;

              :deep(.number) {
                border-radius: 4px;
                font-family: none;
                font-family: $textFont;
                background-color: transparent;
                border: 1px solid $lineColor;
                color: #fff;

                &:hover {
                  color: $font_main_color;
                  background-color: $BK_GRAY;
                }
              }

              :deep(.is-active) {
                background-color: $theme-red;
                border-radius: 4px;

                &:hover {
                  color: $theme-white;
                  background-color: $theme-red;
                }
              }

              :deep(.btn-prev),
              :deep(.btn-next) {
                border-radius: 4px;
                border: 1px solid $lineColor;
                background-color: transparent;

                &:hover {
                  color: $font_red_color;
                  background-color: $BK_GRAY;
                }
              }

              :deep(.more) {
                border-radius: 4px;
                border: 1px solid $lineColor;
                background-color: transparent;

                &:hover {
                  color: $font_red_color;
                  background-color: $BK_GRAY;
                }
              }
            }
          }
        }
      }
    }
  }
}

:deep(.el-drawer__header) {
  display: none;
}

:deep(.el-overlay) {
  z-index: 2;
  position: fixed;
  top: -70px;
  left: 0;
  right: 0;
  height: 100%;
  background-color: transparent;
}

.spinCircle {
  animation-play-state: running;
}

.pausedCircle {
  animation-play-state: paused !important;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
</style>
